import React, { PureComponent } from 'react';
import { connect } from 'dva';
import '@ant-design/compatible/assets/index.css';
import { FormInstance } from 'antd/lib/form';
import PropTypes from 'prop-types';
import { Modal, Button, Timeline, message, Input, Table, Form, Row, Col, Select, Space, Radio, InputNumber } from 'antd';
import { getDicByKey } from '@/support/common';

const levelData = {
  0: '低',
  1: '中',
  2: '高',
}

const priorityData = {
  0: '低',
  1: '中',
  2: '高',
}

const handleStatusData = {
  0: '未结束',
  1: '已结束',
}

const FormItem = Form.Item;
const { TextArea } = Input;
const mapStateToProps = (state: any) => ({})
class DetailModal extends PureComponent<any, any> {
  formRef = React.createRef<FormInstance>();
  static contextTypes = {
    permissions: PropTypes.array,
    dicData: PropTypes.any
  };
  constructor(props: any) {
    super(props);
    this.state = {}
  }

  componentDidMount() {
    const { onRef } = this.props
    onRef && onRef(this);
  }

  componentDidUpdate(prevProps: any) {
    const { modalVisible, code } = this.props
    if (modalVisible && modalVisible !== prevProps.modalVisible) {
      this.getDealMsg(code)
    }
  }

  //  查询工单处理详情
  getDealMsg = (code: string) => {
    const { dispatch } = this.props
    dispatch({
      type: 'http/getDataWithRes',
      payload: {
        url: '/battery/monitor/order/search',
        code,
      },
      callback: (res: any) => {
        if (res.statusCode === '0') {
          this.formRef.current && this.formRef.current.setFieldsValue({
            ...res.data,
            handleStatus: handleStatusData[res.data?.handleStatus],
            // recommendHandleWay: handleWayData[res.data?.recommendHandleWay],
            recommendHandleWay: getDicByKey(this.context.dicData, 'recommendHandleWay', res.data?.recommendHandleWay + ''),
            priority: priorityData[res.data?.priority],
            level: levelData[res.data.level],
          })
        }
      }
    })
  }

  close = () => {
    const { closeModal } = this.props;
    this.formRef.current && this.formRef.current.resetFields();
    closeModal();
  }

  render() {
    const { modalVisible } = this.props;
    const footer = (
      <div>
        <Button onClick={this.close} type="primary">
          关闭
        </Button>
      </div>
    )

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 16 },
      },
    };


    return (
      <Modal
        title="工单处理详情"
        footer={footer}
        visible={modalVisible}
        width={950}
        onCancel={this.close}
      >
        <Form
          style={{ marginTop: 12 }}
          ref={this.formRef}
        >
          <Row gutter={24}>
            <Col span={12}>
              <FormItem
                {...formItemLayout}
                colon={false}
                name="code"
                label="工单编号"
              >
                <Input disabled={true} placeholder="" />
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem
                {...formItemLayout}
                colon={false}
                name="createDate"
                label="工单创建时间"
              >
                <Input disabled={true} placeholder="" />
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem
                {...formItemLayout}
                colon={false}
                name="vin"
                label="VIN码"
              >
                <Input disabled={true} placeholder="" />
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem
                {...formItemLayout}
                colon={false}
                name="brandName"
                label="品牌"
              >
                <Input disabled={true} placeholder="" />
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem
                {...formItemLayout}
                colon={false}
                name="seiresName"
                label="车系"
              >
                <Input disabled={true} placeholder="" />
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem
                {...formItemLayout}
                colon={false}
                name="typeName"
                label="车型"
              >
                <Input disabled={true} placeholder="" />
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem
                {...formItemLayout}
                colon={false}
                name="level"
                label="风险等级"
              >
                <Input disabled={true} placeholder="" />
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem
                {...formItemLayout}
                colon={false}
                name="batteryType"
                label="电池类型"
              >
                <Input disabled={true} placeholder="" />
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem
                {...formItemLayout}
                colon={false}
                name="batterySupplier"
                label="电池供应商"
              >
                <Input disabled={true} placeholder="" />
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem
                {...formItemLayout}
                colon={false}
                name="batteryCode"
                label="电池包编号"
              >
                <Input disabled={true} placeholder="" />
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem
                {...formItemLayout}
                colon={false}
                name="priority"
                label="优先级"
              >
                <Input disabled={true} placeholder="" />
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem
                {...formItemLayout}
                colon={false}
                name="recommendHandleWay"
                label="建议处理方式"
              >
                <Input disabled={true} placeholder="" />
              </FormItem>
            </Col>
            <Col span={24}>
              <FormItem
                labelCol={{
                  xs: { span: 24 },
                  sm: { span: 4 },
                  md: { span: 4 },
                }}
                wrapperCol={{
                  xs: { span: 24 },
                  sm: { span: 20 },
                  md: { span: 20 },
                }}
                colon={false}
                name="workItem"
                label="工作事项"
              >
                <TextArea disabled={true} placeholder="" />
                {/* <Input disabled={true} placeholder="" /> */}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem
                {...formItemLayout}
                colon={false}
                name="handleStatus"
                label="处理状态"
              >
                <Input disabled={true} placeholder="" />
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem
                {...formItemLayout}
                colon={false}
                name="handleResult"
                label="处理结果"
              >
                <Input disabled={true} placeholder="" />
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem
                {...formItemLayout}
                colon={false}
                name="handleStartDate"
                label="维修开始时间"
              >
                <Input disabled={true} placeholder="" />
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem
                {...formItemLayout}
                colon={false}
                name="newBatteryCode"
                label="新电池包编号"
              >
                <Input disabled={true} placeholder="" />
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem
                {...formItemLayout}
                colon={false}
                name="handleDealer"
                label="处理人"
              >
                <Input disabled={true} placeholder="" />
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem
                {...formItemLayout}
                colon={false}
                name="handleEndDate"
                label="维修结束时间"
              >
                <Input disabled={true} placeholder="" />
              </FormItem>
            </Col>
            <Col span={24}>
              <FormItem
                labelCol={{
                  xs: { span: 24 },
                  sm: { span: 4 },
                  md: { span: 4 },
                }}
                wrapperCol={{
                  xs: { span: 24 },
                  sm: { span: 20 },
                  md: { span: 20 },
                }}
                colon={false}
                name="handleItem"
                label="维修内容"
              >
                <TextArea disabled={true} placeholder="" />
              </FormItem>
            </Col>
            <Col span={24}>
              <FormItem
                labelCol={{
                  xs: { span: 24 },
                  sm: { span: 4 },
                  md: { span: 4 },
                }}
                wrapperCol={{
                  xs: { span: 24 },
                  sm: { span: 20 },
                  md: { span: 20 },
                }}
                colon={false}
                name="monitorRecord"
                label={<div>持续监控记录<div style={{ textAlign: 'center' }}>（20天）</div></div>}
              >
                <TextArea disabled={true} placeholder="" />
              </FormItem>
            </Col>
          </Row>

        </Form>

      </Modal>
    )
  }
}
export default connect(mapStateToProps)(DetailModal);
